// 启动行程控制组件 - 基于用户需求说明

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Play,
  Pause,
  Square,
  MapPin,
  Clock,
  Route,
  AlertCircle
} from 'lucide-react';

const TripControlPanel: React.FC = () => {
  const { navigationInfo, addSystemMessage } = useHmiState();
  const [tripStatus, setTripStatus] = React.useState<'idle' | 'starting' | 'running' | 'paused'>('idle');
  const [currentRoute] = React.useState('企鹅岛地铁站 → 软通动力大厦');

  const handleStartTrip = () => {
    setTripStatus('starting');
    addSystemMessage({
      type: 'info',
      title: '行程启动',
      message: '正在启动自动驾驶行程，请系好安全带',
      acknowledged: false
    });
    
    setTimeout(() => {
      setTripStatus('running');
      addSystemMessage({
        type: 'success',
        title: '行程已启动',
        message: '自动驾驶模式已激活，车辆开始行驶',
        acknowledged: false
      });
    }, 2000);
  };

  const handlePauseTrip = () => {
    setTripStatus('paused');
    addSystemMessage({
      type: 'warning',
      title: '行程暂停',
      message: '车辆已暂停，等待进一步指示',
      acknowledged: false
    });
  };

  const handleStopTrip = () => {
    setTripStatus('idle');
    addSystemMessage({
      type: 'info',
      title: '行程结束',
      message: '自动驾驶行程已结束，车辆已停止',
      acknowledged: false
    });
  };

  const getStatusColor = () => {
    switch (tripStatus) {
      case 'idle':
        return 'text-gray-400';
      case 'starting':
        return 'text-warning-400';
      case 'running':
        return 'text-success-400';
      case 'paused':
        return 'text-warning-400';
      default:
        return 'text-gray-400';
    }
  };

  const getStatusText = () => {
    switch (tripStatus) {
      case 'idle':
        return '待机中';
      case 'starting':
        return '启动中...';
      case 'running':
        return '行驶中';
      case 'paused':
        return '已暂停';
      default:
        return '未知状态';
    }
  };

  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">行程控制</h3>

      {/* 当前路线信息 */}
      <div className="mb-6">
        <div className="bg-gray-800/50 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-3">
            <Route size={18} className="text-primary-400" />
            <span className="text-sm font-medium text-gray-300">当前路线</span>
          </div>
          <div className="text-white font-medium mb-2">{currentRoute}</div>
          <div className="flex items-center gap-4 text-sm text-gray-400">
            <div className="flex items-center gap-1">
              <MapPin size={14} />
              <span>目的地: {navigationInfo.destination}</span>
            </div>
            <div className="flex items-center gap-1">
              <Clock size={14} />
              <span>预计: {navigationInfo.eta}分钟</span>
            </div>
          </div>
        </div>
      </div>

      {/* 行程状态 */}
      <div className="mb-6">
        <div className="flex items-center justify-between mb-3">
          <span className="text-sm text-gray-300">行程状态</span>
          <div className={`flex items-center gap-2 ${getStatusColor()}`}>
            <div className={`w-2 h-2 rounded-full ${
              tripStatus === 'running' ? 'bg-success-500 animate-pulse' :
              tripStatus === 'starting' ? 'bg-warning-500 animate-pulse' :
              tripStatus === 'paused' ? 'bg-warning-500' : 'bg-gray-500'
            }`} />
            <span className="text-sm font-medium">{getStatusText()}</span>
          </div>
        </div>
      </div>

      {/* 主要控制按钮 */}
      <div className="mb-6">
        <div className="grid grid-cols-1 gap-3">
          {tripStatus === 'idle' && (
            <button
              onClick={handleStartTrip}
              className="hmi-button-primary flex items-center justify-center gap-3 py-4 text-lg font-bold"
            >
              <Play size={24} />
              启动行程
            </button>
          )}

          {tripStatus === 'running' && (
            <>
              <button
                onClick={handlePauseTrip}
                className="hmi-button flex items-center justify-center gap-3 py-3 bg-warning-600 hover:bg-warning-500"
              >
                <Pause size={20} />
                暂停行程
              </button>
              <button
                onClick={handleStopTrip}
                className="hmi-button-danger flex items-center justify-center gap-3 py-3"
              >
                <Square size={20} />
                结束行程
              </button>
            </>
          )}

          {tripStatus === 'paused' && (
            <>
              <button
                onClick={handleStartTrip}
                className="hmi-button-primary flex items-center justify-center gap-3 py-3"
              >
                <Play size={20} />
                继续行程
              </button>
              <button
                onClick={handleStopTrip}
                className="hmi-button-danger flex items-center justify-center gap-3 py-3"
              >
                <Square size={20} />
                结束行程
              </button>
            </>
          )}

          {tripStatus === 'starting' && (
            <div className="flex items-center justify-center gap-3 py-4 text-warning-400">
              <div className="w-6 h-6 border-2 border-warning-400 border-t-transparent rounded-full animate-spin" />
              <span className="text-lg font-medium">正在启动...</span>
            </div>
          )}
        </div>
      </div>

      {/* 行程信息 */}
      {tripStatus === 'running' && (
        <div className="border-t border-gray-700 pt-4">
          <h4 className="text-sm font-medium text-gray-300 mb-3">行程信息</h4>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-gray-400">当前速度:</span>
              <span className="text-white">45 km/h</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">剩余距离:</span>
              <span className="text-white">{navigationInfo.distance} km</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">预计到达:</span>
              <span className="text-white">{navigationInfo.eta} 分钟</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">下一路口:</span>
              <span className="text-white">{navigationInfo.nextTurn}</span>
            </div>
          </div>
        </div>
      )}

      {/* 安全提示 */}
      <div className="border-t border-gray-700 pt-4 mt-4">
        <div className="flex items-start gap-2 text-xs text-gray-400">
          <AlertCircle size={14} className="mt-0.5 flex-shrink-0" />
          <div>
            <p>• 行程期间请保持安全带系好</p>
            <p>• 如遇紧急情况请使用紧急停车按钮</p>
            <p>• 安全员可随时接管车辆控制</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TripControlPanel;
